import { useModel } from "umi";
import { SearchOutlined } from "@ant-design/icons";
import { Alert, Button, Divider, Empty, Input, Select, Space, Typography } from "antd"
import { useEffect, useState } from "react";

export default () => {
  const { query } = useModel('networkModel')

  const options = [
    {
      value: 'path',
      label: 'path',
    },
    {
      value: 'header',
      label: 'header',
    },
  ];

  const [nql, setNQL] = useState('')

  const [qobj, setQobj] = useState('path')
  const [src, setSrc] = useState('IHEP Beijing')
  const [header, setHeader] = useState('dip=10.0.7.1')
  const [result, setResult] = useState('')

  useEffect(() => {
    let query = `query ${qobj} with source="${src}" and header="${header}";`;
    setNQL(query)
  }, [qobj, src, header])

  const submit = () => {
    let dip = header.split('=')[1]
    let res = query(src, dip)
    setResult(res)
  }

  return (
    <Space direction="vertical" style={{ width: '100%', height: '100%' }}>
      <Alert message="Use NQL (Network Query Language) to query a network model." type="info" showIcon />
      {/* <Input.Search size="large" addonBefore="NQL" defaultValue="query path with source('IHEP Beijing') and header('dstip=10.0.5.1')" /> */}
      <Divider orientation="left">NQL</Divider>
      <Space.Compact style={{ width: '100%' }}>
        <Button type="dashed">query</Button>
        <Select defaultValue="path" options={options} onChange={(v) => setQobj(v)} />
        <Button type="dashed">with</Button>
        <Button type="dashed">source="</Button>
        <Input value={src} onChange={(e) => setSrc(e.target.value)} />
        <Button type="dashed">" and header="</Button>
        <Input value={header} onChange={(e) => setHeader(e.target.value)} />
        <Button type="dashed">"</Button>
        <Button type="primary" onClick={submit}><SearchOutlined /></Button>
      </Space.Compact>
      <Typography>
        <pre>{nql}</pre>
      </Typography>
      <Divider orientation="left">Results</Divider>
      {result ? <Typography>
        <pre>{result}</pre>
      </Typography> : <Empty />}
    </Space>
  )
}